<#assign ctx=request.contextPath/>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="${base}/rs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${ctx}/rs/bootstrap-fileinput/css/fileinput.min.css" />

    <script type="text/javascript" src="${ctx}/rs/jquery/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="${ctx}/rs/bootstrap-fileinput/js/fileinput.min.js"></script>
    <script type="text/javascript" src="${ctx}/rs/bootstrap-fileinput/js/locales/zh.js"></script>
    <script type="text/javascript" src="${ctx}/rs/bootstrap/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        function initFileInput(ctrlName) {
            var control = $('#' + ctrlName);
            control.fileinput({
                language: 'zh',
                uploadUrl: '#', // you must set a valid URL here else you will get an error
                allowedFileExtensions : ['jpg', 'png','gif'],
                dropZoneEnabled: true,//是否显示拖拽区域
               // browseOnZoneClick: true,//区域是否点击
                dropZoneTitle:"可以拖拽头像到这里,快到碗里来!!!",
                dropZoneClickTitle:"",
                zoomModalHeight: 280,
                overwriteInitial: false,
                maxFileSize: 1000,
                maxFilesNum: 10,
                showUploadedThumbs: false,
                showCaption: false,
            })
        }

        //初始化就调用该方法
        $(function () {
            initFileInput("file");
        })
    </script>
</head>
<body>

    <div class="form-group">
        <label class="col-sm-2 control-label">图片上传:</label>
        <div class="col-sm-4">
            <input id="file" name="myfile" type="file" multiple data-show-caption="true">
            <p class="help-block">支持jpg、jpeg、png格式，大小不超过2.0M</p>
        </div>
    </div>

</body>
</html>